<template>
  <ProfileLayout :breadcrumbs="['个人中心', '账户设置']">
    <div class="bg-white rounded-2xl p-8 shadow-sm">
      <h2 class="text-2xl font-light text-gray-900 mb-6">账户设置</h2>
      
      <div class="space-y-6">
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">通知设置</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <div>
                <h4 class="text-sm font-medium text-gray-900">订单通知</h4>
                <p class="text-sm text-gray-600">接收订单状态更新通知</p>
              </div>
              <input 
                v-model="settings.order_notifications"
                type="checkbox" 
                class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded" 
              />
            </div>
            <div class="flex items-center justify-between">
              <div>
                <h4 class="text-sm font-medium text-gray-900">促销通知</h4>
                <p class="text-sm text-gray-600">接收产品促销和优惠信息</p>
              </div>
              <input 
                v-model="settings.promo_notifications"
                type="checkbox" 
                class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded" 
              />
            </div>
          </div>
        </div>
        
        <div>
          <h3 class="text-lg font-medium text-gray-900 mb-4">隐私设置</h3>
          <div class="space-y-4">
            <div class="flex items-center justify-between">
              <div>
                <h4 class="text-sm font-medium text-gray-900">数据收集</h4>
                <p class="text-sm text-gray-600">允许收集使用数据以改善服务</p>
              </div>
              <input 
                v-model="settings.data_collection"
                type="checkbox" 
                class="h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded" 
              />
            </div>
          </div>
        </div>

        <div class="pt-6">
          <button 
            @click="saveSettings"
            :disabled="form.processing"
            class="px-6 py-3 bg-gray-900 text-white rounded-2xl font-medium hover:bg-gray-800 transition-colors disabled:opacity-50"
          >
            {{ form.processing ? '保存中...' : '保存设置' }}
          </button>
        </div>
        
        <div class="pt-6 border-t border-gray-200">
          <h3 class="text-lg font-medium text-red-600 mb-4">危险区域</h3>
          <p class="text-sm text-gray-600 mb-4">删除账户将永久删除您的所有数据，此操作无法撤销。</p>
          <button 
            @click="confirmDeleteAccount"
            class="px-6 py-3 bg-red-600 text-white rounded-2xl font-medium hover:bg-red-700 transition-colors"
          >
            删除账户
          </button>
        </div>
      </div>
    </div>
  </ProfileLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useForm } from '@inertiajs/vue3'
import ProfileLayout from '@/Layouts/ProfileLayout.vue'

// Props
const props = defineProps({
  userSettings: {
    type: Object,
    default: () => ({
      order_notifications: true,
      promo_notifications: false,
      data_collection: true
    })
  }
})

// 设置
const settings = reactive({
  order_notifications: props.userSettings?.order_notifications ?? true,
  promo_notifications: props.userSettings?.promo_notifications ?? false,
  data_collection: props.userSettings?.data_collection ?? true
})

// 表单
const form = useForm(settings)

// 保存设置
const saveSettings = () => {
  form.patch(route('settings.update'), {
    preserveScroll: true,
    onSuccess: () => {
      // 保存成功
    }
  })
}

// 确认删除账户
const confirmDeleteAccount = () => {
  if (confirm('确定要删除账户吗？此操作无法撤销！')) {
    if (confirm('请再次确认：删除账户将永久删除您的所有数据！')) {
      // 执行删除操作
      console.log('删除账户')
    }
  }
}
</script>

